<template>
  <div class="image-box"></div>
</template>

<script>
/**
 * 现在只是已图片作为一个组件，还会存在 img + title 的情况
 * 这个时候请对创建的元素进行更改
 */
export default {
  name: "WaterFall",
  props: {
    // 图片
    data: {
      type: Array,
      required: true
    },
    // 一行多少列
    column: {
      type: Number,
      default: 5
    }
  },
  mounted() {
    this.waterFall();
  },
  methods: {
    /**
     * 第二种加载方式，暂时没有发现问题
     */
    waterFall() {
      const oParent = document.querySelector(".image-box");
      const MARGIN = 10; // margin 10 px
      const column = this.column;
      const parentClientWidth = oParent.clientWidth - MARGIN * column; // 父元素的宽度
      const iPinW = parentClientWidth / column; // 子元素的宽度
      const pinHArr = []; // 用于存储 每列中的所有块框相加的高度。
      const imageElementArr = []; // img 标签元素对象
      let i = 0; // 当前加载的图片数量
      this.data.forEach($img => {
        const img = new Image();
        const figureBox = document.createElement("figure");
        figureBox.className = "img-col";
        img.onload = () => {
          figureBox.style.cssText += `width: ${iPinW}px`;
          // 追加图片
          // 要在获取 offsetLeft、offsetHeight 之前追加到 dom 里，否则没有 offsetLeft、offsetHeight 等一些属性
          figureBox.appendChild(img);
          // 追加标题
          if ($img.title) {
            const figcaptionBox = document.createElement("figcaption");
            figcaptionBox.innerText = $img.title;
            figureBox.appendChild(figcaptionBox);
          }
          // 追加到 dom 中
          imageElementArr.push(figureBox);
          oParent.appendChild(figureBox);
          const pinH = figureBox.offsetHeight + MARGIN;
          if (i < column) {
            pinHArr.push(pinH); // 第一行中的num个块框pin 先添加进数组pinHArr
          } else {
            const minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH
            const minHIndex = pinHArr.indexOf(minH);
            figureBox.style.cssText += `position: absolute; top: ${minH}px; left: ${imageElementArr[
              minHIndex
            ].offsetLeft -
              MARGIN / 2}px;`;
            // 数组 最小高元素的高 + 添加上的imageElementArr[i]块框高
            pinHArr[minHIndex] += imageElementArr[i].offsetHeight + MARGIN; //更新添加了块框后的列高
          }
          i++;
          oParent.style.cssText += `height: ${Math.max(...pinHArr)}px`;
        };
        img.alt = "";
        img.src = $img.src;
        img.onclick = e => {
          this.$emit("click", $img);
          e.stopPropagation();
        };
      });
    }
  }
};
</script>

<style lang="scss">
.image-box {
  position: relative;
}

.img-col {
  border-radius: 6px;
  float: left;
  overflow: hidden;
  box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.05);
  margin: 5px;
  img {
    vertical-align: top;
    width: 100%;
    cursor: zoom-in;
  }
  figcaption {
    padding: 8px;
    font-size: 12px;
  }
}
</style>
